/*import React, { Component } from 'react';
import {Card, Button,List,Avatar, Badge} from 'antd'

import {connect} from 'react-redux';

const data = [
    {
      title: 'Ant Design Title 1',
    },
    {
      title: 'Ant Design Title 2',
    },
    {
      title: 'Ant Design Title 3',
    },
    {
      title: 'Ant Design Title 4',
    },
  ];


const mapState = state => {
  const { list = [] } = state.notifications
  return {
      list: list
  }
}

class Notifications extends Component {
    render() {
        return (
            <Card
               title="通知中心"
               bordered={false}
               style={{ width: '100%', minHeight: 640}}
               extra={<Button>全部标记为已读</Button>}
           >
               <List
                    itemLayout="horizontal"
                    dataSource={data}
                    renderItem={item => (
                    <List.Item 
                        extra={<Button>标记为已读</Button>}
                    >
                        <List.Item.Meta
                        avatar={
                            <Badge dot>
                                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                            </Badge>
                        }
                        title={<a href="https://ant.design">{item.title}</a>}
                        description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                        />
                    </List.Item>
                    )}
                />
           </Card>
        )
    }
}


export default Notifications;*/


import React, { memo } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import {Card, Button,List, Badge, Spin} from 'antd'
import {markNotificationsAsReadById, markAllNotificationsAsRead} from '../../store/notisficationStore/actionCreators';




export default memo(function Notifications(props) {
  // console.log(props);
  
  const notifications = useSelector(state => state.notifications, shallowEqual);

  const dispatch = useDispatch();

  // useEffect(() => {
  
  // }, [])
  const list = notifications.list;
  const isLoading = notifications.isLoading;


  //标记为已读触发的函数
  const markHasRead = (e,id) => {
    // console.log(e);
    // console.log(id);
    console.log(isLoading);
    dispatch(markNotificationsAsReadById(id));
  }

  //标记全部已读
  const markAllHasRead = () => {
    dispatch(markAllNotificationsAsRead());
  }



  
  return (
    <Spin spinning={isLoading}>
      <Card
        title="通知中心"
        bordered={false}
        style={{ width: '100%', minHeight: 640}}
        extra={<Button disabled={list.every(item => item.hasRead === true)} onClick={e => markAllHasRead()}>全部标记为已读</Button>}
    >
        <List
              itemLayout="horizontal"
              dataSource={list}
              renderItem={item => (
              <List.Item 
                  extra={item.hasRead ? null : <Button onClick={e => markHasRead(e,item.id)}>标记为已读</Button>}
              >
                  <List.Item.Meta
                  title={ <Badge dot={!item.hasRead}>{item.title}</Badge>}
                  description={item.desc}
                  />
              </List.Item>
              )}
          />
    </Card>
    </Spin>
)
})





